<template>
    <el-form-item label="创新互动样式">
        <el-checkbox v-model="dataForm.creatives_base.creatives_class[dataForm.creatives_index].card_type" true-label="PRODUCT" false-label="" @change="isShowCar">商品卡片</el-checkbox>
        <div class="tk_car_box" v-if="dataForm.creatives_base.creatives_class[dataForm.creatives_index].card_type=='PRODUCT'">
            <div class="tk_car_item flexbox flexcenter">
                <span class="tk_car_title">价格：</span>
                <el-checkbox v-model="dataForm.creatives_base.creatives_class[dataForm.creatives_index].card_show_price" :true-label="true" :false-label="false" @change="sessionSave">显示价格</el-checkbox>
            </div>
            <div class="tk_car_item flexbox flexcenter mt_12">
                <span class="tk_car_title">标签：</span>
                <el-form-item label="" :prop="`creatives_base.creatives_class.${dataForm.creatives_index}.card_tags`" :rules="{required: true, message: '请选择', trigger: ['blur', 'change']}">
                    <el-checkbox-group :max="1" v-model="dataForm.creatives_base.creatives_class[dataForm.creatives_index].card_tags" @change="sessionSave">
                        <el-checkbox label="DESC">说明</el-checkbox>
                        <el-checkbox label="BRAND">品牌名称</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        isShowCar(val){
            if(val=='PRODUCT'){
                this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].card_show_price = true
                this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].card_tags = ["BRAND"]
            }else{
                this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].card_show_price = false
                this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].card_tags = []
            }
            
            this.sessionSave()
        },
        sessionSave() {
            this.$emit("sessionSave");
        },
    },
};
</script>


<style scoped>
.tk_car_box {
    width: 318px;
    box-sizing: border-box;
    padding: 12px 20px;
    background: rgba(165, 177, 209, 0.1);
    border-radius: 6px;
    margin-top: 12px;
}
.tk_car_title {
    font-size: 14px;
    color: #616c85;
    margin-right: 20px;
}
</style>

